import React, { useState, useEffect } from 'react';
import { Row, Col, Spin, Button, Space, PaginationProps, Tag } from 'antd';
import axios from 'axios';
import PlatformCard from '../../component/portal/platformCard';
import { EditOutlined, UserOutlined } from '@ant-design/icons';
import Table, { ColumnsType } from 'antd/es/table';
import AddTaskButton from './addTaskButton';

interface Task {
    id: number;
    creator: string;
    name: string;
    progress: string;
    updateTime: string;
}

const columns: ColumnsType<Task> = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 80,
        sorter: (a, b) => a.id - b.id,
    },
    {
        title: '创建用户',
        dataIndex: 'creator',
        render: (text: string) => (
            <Space>
                <UserOutlined />
                {text}
            </Space>
        ),
    },
    {
        title: '名称',
        dataIndex: 'name',
    },
    {
        title: '任务类型',
        render: () => <Tag color="blue">视频任务</Tag>,
    },
    {
        title: '标注进度',
        dataIndex: 'progress',
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
    },
    {
        title: '操作',
        render: () => (
            <Button icon={<EditOutlined />} type="text" />
        ),
    },
];

// 表格数据（带类型标注）
const data: Task[] = [
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    },
    {
        id: 3,
        creator: 'luosan',
        name: 'Edward King',
        progress: '1/1',
        updateTime: '2025年3月3日15:37',
    },
    {
        id: 2,
        creator: 'luosan',
        name: 'test2',
        progress: '5/5',
        updateTime: '2025年3月3日10:22',
    },
    {
        id: 1,
        creator: 'admin',
        name: '测试',
        progress: '0/1',
        updateTime: '2025年3月1日17:20',
    }
];

// 分页配置（带类型标注）
const pagination: PaginationProps = {
    showTotal: (total: number) => `共1页/${total}条`,
    showSizeChanger: false,
    pageSize: 8,
    itemRender: (_, type, originalElement) => {
        if (type === 'next') {
            return <Button>尾页</Button>;
        }
        return originalElement;
    },
};


// 样式定义
const contentStyle: React.CSSProperties = {
    position: 'absolute',
    left: '60px',
    width: 'calc(100% - 120px)',
    padding: '16px 0'
};

const gridStyle: React.CSSProperties = {
    width: '50%',
    textAlign: 'center',
    height: '50px',
    padding: '15px',
    cursor: 'pointer'
};

export default function TaskAdmin() {

    return (
        <div>
            {/* <PageHeader
                title="任务管理"
                extra={[
                    <Button key="update" type="primary">
                        更新标注进度
                    </Button>,
                    <Space key="user" style={{ marginLeft: 20 }}>
                        <UserOutlined />
                        admin
                    </Space>,
                ]}
            /> */}
            <AddTaskButton />
            <div style={{ padding: 24 }}>
                <Table<Task>
                    columns={columns}
                    dataSource={data}
                    pagination={pagination}
                    bordered
                    rowKey="id"
                    style={{
                        backgroundColor: 'white',
                        border: '1px solid #e8e8e8',
                    }}
                />
            </div>
        </div>
    );
};

